<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        两种写法
        computed:{
            计算属性名(){
                代码逻辑
                return 结果
            }
        }

        computed:{
            计算属性名:{
                get(){
                    代码逻辑
                    return 结果
                },
                set(修改的值){
                    代码逻辑
                }
            }
        }
     -->
     <div id="app">
        姓:<input type="text" v-model="firstName">
        名:<input type="text" v-model="lastName">
        {{totalName}}
        <br><br>
        <button @click="change">改名卡</button>
     </div>
     <script src='./vue.js'></script>
     <script>
        const app = new Vue({
            el:'#app',
            data:{
                firstName:'',
                lastName:''
            },
            computed:{
                totalName:{
                    get(){
                        return this.firstName+this.lastName
                    },
                    set(val){
                        this.firstName=val.slice(0,1)
                        this.lastName=val.slice(1)
                    }
                }
            },
            methods:{
                change(){
                    this.totalName = '吕小布'
                }
            }
        })
     </script>
</body>
</html>